<template>
  <div class="wang-editor-container"></div>
</template>

<script>
import E from "wangeditor/release/wangEditor.min.js";
// import E from 'wangeditor'
export default {
  name: "Editor",
  components: {
    E,
  },
  props: {
    editorContent: {
      type: String,
      default: "",
    },
    editorConfig: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      editor: null,
      editorValue: "",
      wangEditorConfig: {
        // 菜单
        menus: [
          "head", // 标题
          "bold", // 粗体
          "fontSize", // 字号
          "fontName", // 字体
          "italic", // 斜体
          "underline", // 下划线
          "strikeThrough", // 删除线
          "foreColor", // 文字颜色
          "backColor", // 背景颜色
          "link", // 插入链接
          "list", // 列表
          "justify", // 对齐方式
          "quote", // 引用
          "emoticon", // 表情
          "image", // 插入图片
          "table", // 表格
          "video", // 插入视频
          "code", // 插入代码
          "undo", // 撤销
          "redo", // 重复
        ],
        fontNames: ["宋体", "微软雅黑", "Arial", "Tahoma", "Verdana"], // 字体
        colors: [
          "#000000",
          "#eeece0",
          "#1c487f",
          "#4d80bf",
          "#c24f4a",
          "#8baa4a",
          "#7b5ba1",
          "#46acc8",
          "#f9963b",
          "#ffffff",
        ], // 颜色
        zIndex: 1000, // 编辑区域的 z-index
        debug: true, // 是否开启 debug 模式（debug 模式下错误会 throw error 形式抛出）
        pasteFilterStyle: true, // 粘贴是否过滤样式
        pasteIgnoreImg: false, // 粘贴内容时，忽略图片。默认关闭
        showLinkImg: true, // 是否显示添加网络图片的 tab
        uploadImgMaxSize: 5 * 1024 * 1024, // 默认上传图片 max size: 5M
        uploadImgMaxLength: 10000, // 配置一次最多上传几个图片
        uploadImgShowBase64: true, // 上传图片，是否显示 base64 格式
        uploadImgServer: false, // 上传图片，server 地址（如果有值，则 base64 格式的配置则失效）
        uploadFileName: "", // 自定义配置 filename
        uploadImgParams: {}, // 上传图片的自定义参数 如token等
        uploadImgHeaders: {}, // 上传图片的自定义header 如Accept等
        withCredentials: false, // 配置 XHR withCredentials
        uploadImgTimeout: 10000, // 自定义上传图片超时时间 ms
      },
    };
  },
  watch: {
    editorContent(val) {
      if (val !== this.editorValue) {
        this.editor.txt.html(val);
      }
    },
    editorConfig: {
      handler: function (val) {
        this.wangEditorConfig = Object.assign(this.wangEditorConfig, val);
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.editorInit();
    this.editor.txt.html(this.editorContent);
  },
  methods: {
    editorInit() {
      this.editor = new E(this.$el);
      this.editor.customConfig = {
        ...this.wangEditorConfig,
        // 插入链接时候的格式校验 text 是插入的文字 link 是插入的链接
        linkCheck: (text, link) => {
          this.$emit("linkCheck", { text, link });
          return true;
        },
        // 插入网络图片的校验 src即图片的地址
        linkImgCheck: (src) => {
          this.$emit("linkImgCheck", src);
          return true;
        },
        // 对粘贴的文字进行自定义处理，返回处理后的结果。编辑器会将处理后的结果粘贴到编辑区域中。IE 暂时不支持  content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
        pasteTextHandle: (content) => {
          this.$emit("pasteTextHandle", content);
          return content;
        },
        // onchange 事件
        onchange: (html) => {
          this.editorValue = html;
          this.$emit("setEditorValue", html);
        },
        // 插入网络图片的回调  url 即插入图片的地址
        linkImgCallback: (url) => {
          this.$emit("linkImgCallback", url);
        },
        // 上传图片钩子(上传到服务器， 也就是uploadImgServer有值)
        uploadImgHooks: {
          // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置（但是，服务器端返回的result必须是一个 JSON 格式字符串！！！否则会报错）
          // 图片上传并返回结果，自定义插入图片的事件，而不是编辑器自动插入图片
          customInsert: (insertLinkImg, result, editor) => {
            const data = result.data1 || [];
            data.forEach((link) => {
              insertLinkImg(link);
            });
            this.$emit("customInsertUploadImgHooks", {
              insertLinkImg,
              result,
              editor,
            });
          },
          // 图片上传之前触发  如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
          before: (xhr, editor, files) => {
            this.$emit("beforeUploadImgHooks", { xhr, editor, files });
            // return {
            //  prevent: true,
            //  msg: '放弃上传'
            // }
          },
          // 图片上传并返回结果，图片插入成功之后触发
          success: (xhr, editor, result) => {
            this.$emit("successUploadImgHooks", { xhr, editor, result });
          },
          // 图片上传并返回结果，图片插入错误时触发
          fail: (xhr, editor, result) => {
            this.$emit("failUploadImgHooks", { xhr, editor, result });
          },
          // 图片上传出错时触发
          error: (xhr, editor) => {
            this.$emit("errorUploadImgHooks", { xhr, editor });
          },
          // 图片上传超时时触发
          timeout: (xhr, editor) => {
            this.$emit("timeoutUploadImgHooks", { xhr, editor });
          },
        },
      };
      this.editor.create();
    },
  },
};
</script>

<style lang="scss" scoped>
.wang-editor-container {
  width: 100%;
  height: 100%;
  text-align: left;
  padding: 0;

  ::-webkit-scrollbar {
    width: 5px;
    height: 11px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(170, 170, 170, 0.4);
  }
}
</style>

<style lang="scss">
.wang-editor-container {
  .w-e-toolbar {
    flex-wrap: wrap !important;
  }
}
</style>
